<template>
	<div class="container">
		<template  v-if="flag">
			<div>王母 </div>
			<div>太上老君</div>
		</template>
		<template  v-else="flag">
			<div>阎王</div>
			<div>土地</div>
		</template>
		<template  v-show="flag">
			<div>阎王1</div>
			<div>土地1</div>
		</template>
		<button @click="showHidden">按钮</button>
		<ul>
			<li v-for="(items,key,index) in world" :key="index" @click="showThisHtml(key)" :style="{fontSize:'30px',fontWeight:'bold'}">
				{{items}}--{{key}}--{{index}}
			</li>
		</ul>
		<button v-on:click="counterAdd('hah',$event)">按钮</button>
		<div>{{counter}}</div>
		<div>{{getUserinfo}}</div>
		<input  v-model="message" >
		<div>{{message}}</div>
		<div>{{psde}}</div>
		<div class="root" v-bind:class="{container:flag}">
			<button @click="changeClass">切换</button>
		</div>
		<div class="hello" v-bind:class="helloClass"></div>
		<div :class="[{hello:flag},class2]"></div>
		<router-link :to="{name:'yule',params:{count:'50'}}">娱乐</router-link>
	</div>

</template>
<script>
	export default{
		name:"learnVue",
		data(){
			return{
				message:"",
				psde:"",
				flag:false,
				class1:"hello",
				class2:"helloWordl",
				world:{
					name:"我是",
       				country:"china",
        			content:"人"
				},
				counter:0
			}
		},
		methods:{
			showHidden(){
				this.flag = !this.flag;
			},
			counterAdd(msg,event){
				console.log(msg);
				console.log(event);
				this.counter++;
			},
			showThisHtml(msg){
				//console.log(event.target.innerText);
				console.log(this.world[msg]);
			},
			changeClass(){
				this.flag = !this.flag
			}
		},
		computed:{
			//计算属性
			getUserinfo(){
				return this.world.name+"..."+this.world.country
			},
			helloClass(){
				if(this.flag){
					return {
						hc:this.flag
					}
				}
			}
		},
		watch:{
			message(){
				
				this.psde= "值是："+this.message;
			}
		}
	}

</script>
<style>
	.hello{
		border-radius:4px;
		.good{
			transform: rotate(45deg);
		}
	}
</style>